<template>
  <div>
    hello vue --{{ myname }}
    <button @click="addClick">click</button>
    <input type="text" v-model="mytext" />
    <button @click="handleAdd">add</button>
    <ul>
      <li v-for="(data, index) in datalist" :key="index">
        {{ data }}
      </li>
    </ul>
    <h1>抽屉</h1>
    <navbar></navbar>
    <sidebar></sidebar>

  </div>
</template>

<script>
import navbar from './components/Navbar.vue'
import sidebar from './components/Sidebar.vue'
import Vue from 'vue'

Vue.component('navbar', navbar)
export default {
  data () {
    return {
      myname: 'xiaohu',
      mytext: '',
      datalist: []
    }
  },
  components: {
    sidebar
  },
  methods: {
    addClick () {
      this.myname = 'tile111'
    },
    handleAdd () {
      this.datalist.push(this.mytext)
    }
  }
}
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  ul li {
    background-color: #bfa;
  }
}
</style>
